<template>
	<div>
		<el-row :gutter="24">
			<el-col :span="24">
				<el-row :gutter="24">
					<el-col :span="1" style="">
						<p class="queryLabel">车系:</p>
					</el-col>
					<el-col :span="3">
						<el-input placeholder="请选择车系" size="small" icon="search" v-model="carModelCode" :on-icon-click="handleIconClick">
						</el-input>
					</el-col>
					<el-col :span="2" style="text-align: right;">
						<p class="queryLabel">车辆型号:</p>
					</el-col>
					<el-col :span="3">
						<el-select size="small" style="width: 100%;" v-model="carSelect.carModelCode" placeholder="请选择配置" clearable @change="changeModel">
							<el-option v-for="item in modelCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">车辆配置:</p>
					</el-col>
					<el-col :span="3">
						<el-select size="small" style="width: 100%;" v-model="carSelect.carConfigureCode" placeholder="请选择配置" clearable>
							<el-option v-for="item in configCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">vin:</p>
					</el-col>
					<el-col :span="3">
						<el-input placeholder="请输入vin" size="small" v-model="carSelect.vin">
						</el-input>
					</el-col>
					<el-col :span="1" style="">
						<p class="queryLabel">出库状态:</p>
					</el-col>
					<el-col :span="3">
						<el-select size="small" style="width: 100%;" v-model="carSelect.status" placeholder="请选择状态" clearable>
							<el-option v-for="item in statusCombo" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-col>
					<el-col :span="11" style="text-align: right;">
						<el-button type="primary" size="small" @click="query">查询</el-button>
						<el-button type="primary" size="small" @click="saveCar">确认出库</el-button>
						<el-button type="primary" size="small" @click="clean">清空查询条件</el-button>
					</el-col>
				</el-row>
			</el-col>
		</el-row>
		<el-row>
			<el-col :span="24">
				<el-table :data="tableData.dataList" stripe border @selection-change="handleSelectionChange">
					<el-table-column type="selection" width="55" label="选择">
					</el-table-column>
					<el-table-column prop="vin" label="VIN" width="180">
					</el-table-column>
					<el-table-column prop="outStatus" label="出库状态" width="100" :formatter="invoiceTypeCov">
					</el-table-column>
					<el-table-column prop="carSeriesName" label="车系名称" width="100">
					</el-table-column>
					<el-table-column prop="modelName" label="车型名称" width="120">
					</el-table-column>
					<el-table-column prop="configureName" label="配置名称" width="120">
					</el-table-column>
					<el-table-column prop="appearanceName" label="外观颜色" width="120">
					</el-table-column>
					<el-table-column prop="interiorName" label="内饰名称" width="100">
					</el-table-column>
					<el-table-column prop="chooseCode" label="加装代码" width="100">
					</el-table-column>
					<el-table-column prop="chooseName" label="加装名称" width="100">
					</el-table-column>
				</el-table>
				<el-pagination small @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="CurentPage" :page-sizes="page.pageSizes" :page-size="page.pageSize" layout=" total,prev, pager, next" :total="tableData.total">
				</el-pagination>
			</el-col>
		</el-row>
		<carserice :show="showStart" v-if="showStart" v-on:close="showStart=false" v-on:insert="insert"></carserice>
		<el-dialog title="选择车辆" v-model="editFormShow" size="small">
			<el-row :gutter="24">
				<el-col :span="2" style="">
					<p class="queryLabel">出库类型:</p>
				</el-col>
				<el-col :span="8">
					<el-select size="small" style="width: 100%;" v-model="conditionCar.type" placeholder="请选择出库类型" clearable>
						<el-option v-for="item in outTypeComboData" :label="item.label" :value="item.value"></el-option>
					</el-select>
					<!--<el-input size="small" style="" v-model="conditionCar.brand" placeholder="请选择出库类型">
					</el-input>-->
				</el-col>
				<el-col :span="2" style="padding-left: 0px;text-align: right">
					<el-button type="primary" size="small" v-on:click='carQuery'>查询</el-button>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="24">
					<el-table :data="tableDataCar.dataList" border style="width: 100%;align-content: center;" @selection-change="handleSelectionChange">
						<el-table-column type="selection" width="60">
						</el-table-column>
						<el-table-column label="vin" prop="vin" width="180">
						</el-table-column>
						<el-table-column label="合格证号" align="right" prop="">
						</el-table-column>
						<el-table-column label="车辆成本" align="right" prop="purchasePrice">
						</el-table-column>
						<el-table-column label="型号" align="right" prop="carName">
						</el-table-column>
						<el-table-column label="颜色" align="right" prop="colorName">
						</el-table-column>
					</el-table>
					<!--<el-pagination small @size-change="handleSizeChangeCar" @current-change="handleCurrentChangeCar" :current-page="CurentPageCar" :page-size="pageCar.pageSize" layout=" total,prev, pager, next" :total="tableDataCar.total">
					</el-pagination>-->
				</el-col>
			</el-row>

			<div slot="footer" class="dialog-footer">
				<el-button @click="editFormShow = false">取 消</el-button>
				<el-button type="primary" v-on:click='saveCar'>确认出库</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	import carserice from '../../insPlugins/carSeries.vue'
	export default {
		data: function() {
			return {
				//待出库车辆列表
				tableDataCar: {
					total: 0,
					dataList: []
				},
				//车辆查询条件
				conditionCar: {
					type: "1" //出库类型
				},
				//暂估金额显示框
				editFormShow: false,
				//修改金额的form
				comFormDataPrice: {
					id: "",
					price: ""
				},
				//车系选择窗
				showStart: false,
				//查询条件-车型
				carModel: "",
				//日期
				data: {
					firstStart: "",
					firstStarts: ""
				},
				//页码数
				CurentPage: 1,
				//每页的数量
				page: this.page,
				tableData: {
					total: 0,
					dataList: []
				},
				carStart: "",
				outTypeComboData: [{
					value: '1',
					label: '销售出库'
				}, {
					value: '0',
					label: '车辆调拨'
				}],
				//选中的列
				multipleSelection: [],
				carModelCode: "",
				//查询条件
				carSelect: {
					//车辆状态 
					status: "",
					//单位 
					companyId: [],
					//初次入库起
					purchaseStartDate: "",
					//初次入库止 
					purchaseStopDate: "",
					//车系代码
					carSeriesCode: "",
					//车型代码 
					carModelCode: "",
					//配置代码
					carConfigureCode: "",
					//仓库
					warehouse: "",
				},
				//查询条件清空
				carSelectS: {
					//车辆状态 
					status: "",
					//单位 
					companyId: [],
					//初次入库起
					purchaseStartDate: "",
					//初次入库止 
					purchaseStopDate: "",
					//车系代码
					carSeriesCode: "",
					//车型代码 
					carModelCode: "",
					//配置代码
					carConfigureCode: "",
					//仓库
					warehouse: "",
				},
				//车型名称
				carModelCode: "",
				//配置的下拉
				configCombo: [],
				//车型的下拉
				modelCombo: [],
				//配置的下拉
				statusCombo: [{
					value: '0',
					label: '未确认出库'
				}, {
					value: '1',
					label: '已确认出库'
				}],
				//车型名称
				carModelCodes: "",
				//配置的下拉
				configCombos: [],
				//车型的下拉
				modelCombos: [],
			}
		},
		methods: {
			//状态转换
			invoiceTypeCov: function(row, column) {
				var temp = '';
				switch(row.outStatus) {
					case '0':
						temp = "未确认出库";
						break;
					case '1':
						temp = '已确认出库';
						break;
					default:
						''
						break
				};
				return temp;
			},
			//清空查询条件
			clean: function() {
				this.$data.carSelect = Object.assign(this.$data.carSelect, this.$data.carSelectS);
				this.$data.carModelCode = "";
			},
			//车型改变的回调
			changeModel: function(val) {
				if(val != "") {
					this.comboConfigure(val);
				}
				debugger;
			},
			//车型改变的回调
			changeModels: function(val) {
				if(val != "") {
					this.comboConfigures(val);
				}
				debugger;
			},
			//选择车型后的回调
			comboConfigure: function(val) {
				this.$http.get(this.API_ROOT + '/base/carConfigure/combo', {
					params: {
						modelId: val
					}
				}).then((response) => {
					debugger;
					this.$data.configCombo = response.data;
					this.$data.carSelect.carConfigureCode = "";
					//this.$message(response.data);
				}, (response) => {});
			},
			//确认出库
			saveCar: function() {
				if(this.$data.multipleSelection.length == 1) {
					this.$http.get(this.API_ROOT + '/scm/out/update', {
						params: {
							vin: this.$data.multipleSelection[0].vin,
							type:"0"
						}
					}).then(resp => {
						debugger;
						this.$message("出库完成");
						//this.$data.editFormShow = false;
						this.query();
					}, resp => {});
				} else {
					this.$message.error("请选择一条数据！");
				}
			},
			//查询选择的车辆
			carQuery: function() {
				this.$http.get(this.API_ROOT + '/scm/out/notOut', {
					params: {
						type: this.$data.conditionCar.type
					}
				}).then(resp => {
					debugger;
					this.$data.tableDataCar.dataList = resp.data;
				}, resp => {});
			},
			//保存金额
			saveEditPrice: function() {
				debugger;
				this.$http.get(this.API_ROOT + '/scm/car/updateEstimate', {
					params: {
						id: this.$data.comFormDataPrice.id,
						price: this.$data.comFormDataPrice.price
					}
				}).then((response) => {
					debugger;
					this.$message("保存成功");
					this.query();
				}, (response) => {});
				this.$data.editFormShow = false;
			},
			//新增出库
			addOut: function() {
				debugger;
				this.carQuery();
				this.$data.editFormShow = true;
			},
			//车系选择的回调
			insert: function(val, lable) {
				debugger;
				if(this.$data.addNoStoreFormShow == true) {
					this.$data.addNoStoreFormData.carSeriesCode = val;
					this.$data.carModelCodes = lable;
					this.$http.get(this.API_ROOT + '/base/carModel/combo', {
						params: {
							seriesId: val
						}
					}).then((response) => {
						debugger;
						this.$data.modelCombos = response.data;
						this.$data.addNoStoreFormData.carModelCode = "";
						this.$data.addNoStoreFormData.carConfigureCode = "";
						//this.$message(response.data);
					}, (response) => {});
				} else {
					this.$data.carSelect.carSeriesCode = val;
					this.$data.carModelCode = lable;
					this.$http.get(this.API_ROOT + '/base/carModel/combo', {
						params: {
							seriesId: val
						}
					}).then((response) => {
						debugger;
						this.$data.modelCombo = response.data;
						this.$data.carSelect.carModelCode = "";
						this.$data.carSelect.carConfigureCode = "";
						//this.$message(response.data);
					}, (response) => {});
				}
			},
			//打开车型车系选择
			handleIconClick: function() {
				this.$data.showStart = true;
			},
			//复选框回调函数
			handleSelectionChange: function(val) {
				debugger;
				this.$data.multipleSelection = val;
			},
			//列表，分页大小切换
			handleSizeChange: function() {},
			//列表,当前页切换
			handleCurrentChange: function(currentPage) {
				this.$data.CurentPage = currentPage;
				this.query();
			},
			//查询
			query: function() {
				this.$data.carSelect.purchaseStartDate = this.momentFu(this.$data.data.firstStart);
				this.$data.carSelect.purchaseStopDate = this.momentFu(this.$data.data.firstStarts);
				this.$http.post(this.API_ROOT + '/scm/out/salePage', this.$data.carSelect, {
					params: {
						root: window.localStorage.getItem("companyId"),
						status: this.$data.queryStatus,
						start: this.$data.CurentPage,
						limit: this.$data.page.pageSize
					}
				}).then(resp => {
					if(resp.data.success) {
						resp.data.total = parseInt(resp.data.total);
						this.$data.tableData = resp.data;
					} else {
						this.$message.error(resp.data.msg);
					}
				}, resp => {})
			},
			//查询已出库列表
			//			query: function() {
			//				//开始时间
			//				this.$data.carSelect.createStartDate = this.momentFu(this.$data.data.firstStart);
			//				this.$data.carSelect.createStopDate = this.momentFu(this.$data.data.firstStarts);
			//				this.$http.post(this.API_ROOT + '/scm/out/page', this.$data.carSelect, {
			//					params: {
			//						start: this.$data.CurentPage,
			//						limit: this.$data.page.pageSize
			//					}
			//				}).then(resp => {
			//					if(resp.data.success) {
			//						resp.data.total = parseInt(resp.data.total);
			//						// es5写法
			//						this.$data.tableData = resp.data;
			//						//this.baseQuery(this.$data.curTreeDeptId);
			//						//this.$data.exFormShow = false;
			//					} else {
			//						//debugger;
			//						this.$message.error(resp.data.msg);
			//					}
			//				}, resp => {});
			//			},
			//时间判断为空的封装
			momentFu: function(dt) {
				if(dt == '' || dt == null || dt == undefined) {
					return "";
				} else {
					return this.moment(dt).format("YYYY-MM-DD");
				}
			},
		},
		components: {
			carserice
		},
		created: function() {
			this.query();
		}
	}
</script>

<style>

</style>